import React from 'react';
import { Col, Form, Button, Modal, Row, Input, Select } from 'antd';
const R = require('ramda');
import { message } from "antd";
const FormItem = Form.Item;
import BizParams from '../../components/commons/BizParams';
import AreaSelect from '../../components/commons/AreaSelect';
import ManageSelect from '../../components/commons/ManageSelect';
import Constants from '../../utils/Constants';

export default Form.create({ wrappedComponentRef: true })(class VipCustomerDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            open: false,
            searchConditions: {},
            disabled: true,
            record: {},
            saveLoading: false,
            type: "edit",
        };
    }

    isApproval = () => {
        return this.state.type == "approval";

    };

    handleOpen = (disabled, searchConditions, record, type) => {
        this.setState({ open: true, disabled: disabled, searchConditions: searchConditions, record: record, type: type });
    }

    handleCancel = () => {
        this.props.form.resetFields();
        this.setState({ open: false });
    }

    handleChangeInvoiceMailStatus = (value) => {
        let record = this.state.record;
        record.invoiceStatus = value;
        this.setState({ record: record });
        if (value === "0") {
            this.props.form.setFieldsValue({ invoiceNum: "" });
        }
    }

    handleChangeNeedInvoiceStatus = (value) => {
        let record = this.state.record;
        record.needInvoice = value;
        this.setState({ record: record });
        if (value === "0") {
            this.props.form.setFieldsValue({ invoiceStatus: "", invoiceNum: "" });
        }
    }

    handleSave = () => {
        this.props.form.validateFields({ force: true }, (errors, values) => {
            if (errors) return;
            this.setState({ saveLoading: true });
            values.id = R.isNil(this.props.dataSource) ? null : this.props.dataSource.id;
            let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
            if (!R.isNil(values.area) && !R.isEmpty(values.area)) {
                values.province = values.area[0];
                values.city = values.area[1];
                values.district = values.area[2];
            }
            values.register = dataSource.register;
            if (this.isApproval()) {
                this.setState({ searchConditions: { status: 1 } })
            }
            this.props.dispatch({
                type: 'vipManage/updateRegCustomer',
                payload: {
                    dataSource: values,
                    onSuccess: () => {
                        this.setState({ saveLoading: false })//button loading revert
                        this.handleCancel();//close modal window
                        this.props.dispatch({
                            type: 'vipManage/queryRegCustomers',
                            payload: this.state.searchConditions
                        })//resfresh data
                    },
                    onFail: () => this.setState({ saveLoading: false })
                }
            });
        })
    }

    render() {
        let formItemLayout = { labelCol: { span: 7 }, wrapperCol: { span: 17 } };
        let dataSource = R.isNil(this.props.dataSource) ? {} : this.props.dataSource;
        const { getFieldDecorator } = this.props.form;
        let statusArray = [];
        R.mapObjIndexed((value, key) => {
            if (key !== "0") statusArray.push(<Select.Option value={key} key={key}>{value}</Select.Option>);
        }, Constants.VIP_CUSTOMER_STATUS);
        let footer = [
            <Button key="save" size="large" loading={this.state.saveLoading} disabled={this.state.disabled || this.state.saveLoading} onClick={() => this.handleSave()}>保存</Button>,
            <Button key="cancel" size="large" disabled={this.state.disabled || this.state.saveLoading} onClick={this.handleCancel.bind(this)}>取消</Button>
        ];
        let approvalFooter = [
            <Button key="save" size="large" loading={this.state.saveLoading} disabled={(this.state.disabled || this.state.saveLoading) && !this.isApproval()} onClick={() => this.handleSave()}>确认</Button>,
            <Button key="cancel" size="large" disabled={(this.state.disabled || this.state.saveLoading) && !this.isApproval()} onClick={this.handleCancel.bind(this)}>取消</Button>
        ];

        if (this.isApproval()) {
            footer = approvalFooter;
        }
        let approvalForm =
            <Row>
                <Col span={12}>
                    <FormItem {...formItemLayout} label="审核结果" hasFeedback>
                        {getFieldDecorator('status', {
                            rules: [{
                                required: this.isApproval(), message: '请选择审核结果'
                            }],
                            initialValue: ""
                        }
                        )(
                            <Select>
                                <option value={"2"}>审核通过</option>
                                <option value={"4"}>审核不通过</option>
                            </Select>
                            )}
                    </FormItem>
                </Col>
                <Col span={12}>
                    <FormItem {...formItemLayout} label="备注" hasFeedback>
                        {getFieldDecorator('memo', {
                            rules: [{}]
                        }
                        )(
                            <Input />
                            )}
                    </FormItem>
                </Col>
            </Row>;

        return (
            <Modal maskClosable={false} footer={this.state.disabled && !this.isApproval() ? null : footer} visible={this.state.open} title={"会员详情"} width={750} wrapClassName="vertical-center-modal" onCancel={this.handleCancel.bind(this)}>
                <Form>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户名称" hasFeedback>
                                {getFieldDecorator('cstName', {
                                    rules: [{
                                        required: true, message: '请输入客户名称'
                                    }],
                                    initialValue: dataSource.cstName
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="客户类型" hasFeedback>
                                {getFieldDecorator('cstType', {
                                    rules: [{
                                        required: true, message: '请选择客户类型'
                                    }],
                                    initialValue: dataSource.cstType
                                })(
                                    <BizParams sprCode='cstType' disabled={this.state.disabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="会员类型" hasFeedback>
                                {getFieldDecorator('vipType', {
                                    rules: [{
                                        required: true, message: '请选择会员类型'
                                    }],
                                    initialValue: dataSource.vipType
                                })(
                                    <Select style={{ width: '100%' }} disabled={this.state.disabled || this.isApproval()} showSearch placeholder="可通过输入关键字搜索" filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}>
                                        {
                                            !R.isNil(this.props.goodsList) ? this.props.goodsList.map(item => {
                                                return (<Select.Option value={item.id + ""} key={item.id + ""}>{item.name}</Select.Option>);
                                            }) : ''
                                        }
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="状态" hasFeedback>
                                {getFieldDecorator('status', {
                                    rules: [{
                                        required: true, message: '请选择状态',
                                    }],
                                    initialValue: dataSource.status
                                })(
                                    <Select disabled={true} >
                                        {statusArray}
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系人" hasFeedback>
                                {getFieldDecorator('linkman', {
                                    rules: [{
                                        required: true, message: '请输入联系人'
                                    }],
                                    initialValue: dataSource.linkman
                                })(
                                    <Input maxLength="100" disabled={this.state.disabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="联系电话" hasFeedback>
                                {getFieldDecorator('telephone', {
                                    rules: [{
                                        required: true, message: '请输入联系电话',
                                    }],
                                    initialValue: dataSource.telephone
                                })(
                                    <Input maxLength="20" disabled={this.state.disabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="邮箱" hasFeedback>
                                {getFieldDecorator('email', {
                                    rules: [{
                                        required: true, message: '请输入邮箱',
                                        type: 'email', message: '邮箱格式不正确'
                                    }],
                                    initialValue: dataSource.email
                                })(
                                    <Input maxLength="50" disabled={this.state.disabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="进出口权" hasFeedback>
                                {getFieldDecorator('ierights', {
                                    rules: [{
                                        required: true, message: '请选择是否有进出口权'
                                    }],
                                    initialValue: dataSource.ierights
                                })(
                                    <Select disabled={this.state.disabled || this.isApproval()} >
                                        <Select.Option value="0">没有</Select.Option>
                                        <Select.Option value="1">有</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="发票" hasFeedback>
                                {getFieldDecorator('needInvoice', {
                                    rules: [{
                                        required: true, message: '请选择是否需要发票'
                                    }],
                                    initialValue: dataSource.needInvoice
                                })(
                                    <Select disabled={this.state.disabled || this.state.subDisabled || this.isApproval()} onChange={this.handleChangeNeedInvoiceStatus.bind(this)}>
                                        <Select.Option value="0">不需要</Select.Option>
                                        <Select.Option value="1">需要</Select.Option>
                                    </Select>
                                    )}
                            </FormItem>
                        </Col>
                        <Col span={12}>
                            <FormItem {...formItemLayout} label="业务经理" hasFeedback>
                                {getFieldDecorator('waiter', {
                                    rules: [{
                                        required: true, message: '请输入业务经理',
                                    }],
                                    initialValue: dataSource.waiter
                                })(
                                    <ManageSelect sprCode={"ywmanager"} style={{ width: '100%' }} disabled={this.state.disabled || this.state.subDisabled || this.isApproval()} />
                                    )}
                            </FormItem>
                        </Col>
                    </Row>
                    {this.isApproval() ? approvalForm : ""}
                </Form>
            </Modal>
        );
    }
})